<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Course list</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
  <h2>Course list</h2>
  <button v-on:click="preAdd">Add course</button>
  <table border="1" width="100%">
    <tr>
      <th>#</th>
      <th>Code</th>
      <th>Name</th>
      <th>College</th>
      <th>Operation</th>
    </tr>
    <tr v-for="(item, index) in courses">
      <td>{{index+1}}</td>
      <td>{{item.code}}</td>
      <td>{{item.name}}</td>
      <td>{{item.college?.name}}</td>
      <td>
        <button v-on:click="preEdit(index)">Edit</button>
        <button v-on:click="delCourse(item.id)">Delete</button>
      </td>
    </tr>
  </table>
  <!--  课程信息对话框 -->
  <dialog ref="dialog">
    <h3 align="center">{{editing?'Edit':'Add'}} course</h3>
    <table width="100%">
      <tr>
        <td>Code</td>
        <td><input type="text" v-model="editedCourse.code" placeholder="Input code of course"></td>
      </tr>
      <tr>
        <td>Name</td>
        <td><input type="text" v-model="editedCourse.name" placeholder="Input name of course"></td>
      </tr>
      <tr>
        <td>College</td>
        <td>
          <select v-model="collegeId" style="width: 100%;">
            <option value="">Select college</option>
            <option v-for="item in colleges" v-bind:value="item.id">{{item.name}}</option>
          </select>
        </td>
      </tr>
    </table>
    <div class="action">
      <button v-on:click="this.editing=false;this.$refs.dialog.close()">cancel</button>
      <button v-if="editing" v-on:click="editCourse">Update</button>
      <button v-else v-on:click="addCourse">Save</button>
    </div>
  </dialog>
</div>

<script>
  const app = {
    data() {
      return {
        // 编辑状态
        editing: false,
        // editedCourse数据对象用来和各输入框双向绑定
        editedCourse:{
          code: null,
          name: null
        },
        collegeId:null,
        // 课程列表
        courses: [],
        // 学院列表
        colleges:[]
      }
    },
    // Vue应用对象的生命周期函数之一
    mounted() {
      this.loadColleges();
      this.loadCourses();
    },
    methods: {
      // 获取学院列表
      loadColleges(){
        axios.get("/college/college").then(res=>{
          this.colleges =res.data;
        }).catch(err=>{
          alert(err);
        })
      },
      // 定义一个查询课程列表的的函数
      loadCourses() {
        axios.get('/course/course').then(res => {
          this.courses = res.data;
        }).catch(err => {
          console.log(err);
        });
      },

      // 弹出“增加课程对话框”前处理
      preAdd() {
        // 新增课程前，课程信息置空
        this.editedCourse = {id: null, name: null};
        this.collegeId = null;
        this.editing = false;
        // 显示对话框
        this.$refs.dialog.showModal();
      },

      //“添加课程”函数
      addCourse() {
        // 提交到后端之前，先处理editedCourse的嵌入college的值，只需要传college的id即可
        if (this.collegeId) {
          this.editedCourse.college = {id:this.collegeId};
        }
        axios.post('/course/course', this.editedCourse).then(res => {
          // 成功返回，直接重新读取课程列表
          this.loadCourses(); //新课程添加成功后重新查询课程列表并刷新界面
          this.$refs.dialog.close();  // 关闭单对话框
        }).catch(err => {
          console.error(err);
          alert("添加课程发生网络异常，请重试");
          this.$refs.dialog.close(); // 隐藏表单对话框
        });
      },

      // 删除课程函数
      delCourse(id) {
        axios.delete('/course/course/' + id).then(res => {
          this.loadCourses();
          alert(res.data);
        }).catch(err => {
          alert('网络请求异常，请重试!');
        });
      },

      // @Param index 修改课程在整个课程列表中的位置
      preEdit(index) {
        // 复制指定位置的课程到待编辑课程（因为this.editedCourse和对话框输入项绑定的）
        this.editedCourse = {
          id: this.courses[index].id,
          code: this.courses[index].code,
          name: this.courses[index].name
        }
        // 设置学院下拉框为选中课程的学院id
        this.collegeId =this.courses[index].courses?.id||null;
        this.editing = true;  // 修改标志
        this.$refs.dialog.showModal();   // 弹出对话框
      },
      // 修改课程
      editCourse() {
        // 提交到后端之前，先处理editedCourse的嵌入college的值，只需要传college的id即可
        if (this.collegeId && this.collegeId !='null') {
          this.editedCourse.college = {id:this.collegeId};
        }
        axios.put('/course/course/' + this.editedCourse.id
          + '?code='+ this.editedCourse.code
          + '&name=' + this.editedCourse.name
          + '&collegeId=' + this.collegeId
        ).then(res => {
          if (res.data) {
            this.loadCourses();	//当修改成功，刷新页面
            this.editing = false;
            this.$refs.dialog.close();
          } else {
            alert('修改课程《' + this.editedCourse.name + '》失败');
            this.editing = false;
            this.$refs.dialog.close();
          }
        }).catch(err => {
          console.error(err);
          this.editing = false;
          this.$refs.dialog.close();
        });
      }
    }
  }
  // 建立Vue App对象，并装载到html元素上
  Vue.createApp(app).mount('#app');
</script>
</body>
</html>